<template>
	<view v-if="visible" class="competition">
		<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
		<z-paging-swiper>
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
			<template #top>
				<view style="width: 100%; height: 40px; background-color: #0DA25F;margin-bottom: 8rpx;">
					<z-tabs class="zTabs" unit="rpx" ref="tabs" bar-width="66rpx" bar-height="14rpx" :list="tabList"
						:current="current" @change="tabsChange" :active-style="{color: '#000000'}"
						:inactive-style="{color: '#666666'}" active-color="linear-gradient( 90deg, #05B767 0%, rgba(255,204,1,0.2) 100%)" bottom-space="0" />
				</view>
			</template>
			<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
			<!-- v-if="isView"  -->
			<!-- v-if="token && !userInfo.is_expires" -->
			<swiper class="swiper" :current="current" @transition="swiperTransition"
				@animationfinish="swiperAnimationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
					<!-- 这里的swiper-list-item为demo中为演示用定义的组件，列表及分页代码在swiper-list-item组件内 -->
					<!-- 请注意，swiper-list-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
					<swiper-list-item ref="listItem" componentCurrent="competitionItem" :tabIndex="index"
						:clickIndex="clickIndex" :currentIndex="current" @initData="loadData"></swiper-list-item>
				</swiper-item>
			</swiper>
			<!-- <view v-else class="relative">
				<u-image :src="bg_2" width="750rpx" height="740rpx" mode="aspectFill"></u-image>
				<view class="text-center" style="position: absolute; top: 0; left: 0; width: 750rpx; height: 740rpx; padding-top: 40%;">
					<view v-if="!token" style="text-align: center; top: 30%; width: 160rpx; padding: 15rpx 0; background: #0DA25F; color: #ffffff; font-size: 12px; border-radius: 40rpx; margin: 0 auto;" @click="goLogin">立即登录</view>
					<view v-else style="text-align: center; top: 30%; width: 160rpx; padding: 15rpx 0; background: #0DA25F; color: #ffffff; font-size: 12px; border-radius: 40rpx; margin: 0 auto;" @click="renew">申请续期</view>
					<view v-if="!token" class="text-xs" style="color: #222222; width: 100%; padding: 20rpx 0;">您暂未登录，登录后即可获得比赛分析</view>
					<view v-else class="text-xs" style="color: #222222; width: 100%; padding: 20rpx 0;">您的账号已过有效期，请申请续期后继续使用</view>
				</view>
			</view> -->
		</z-paging-swiper>
		<view v-if="token && !userInfo.is_expires" :class="['relative refresh-btn text-xs text-white text-center', {active: isAnimation}]" @click.stop="handleRefresh">
			<text>刷新</text>
		</view>
		<u-modal :show="isRenew" title="告知" content='续期申请已提交,请耐心等待~' @confirm="isRenew = false"></u-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import SwiperListItem from '@/components/swiper-list-item/swiper-list-item.vue';
	import {
		matchList
	} from '@/service/index.js'
	import dayjs from 'dayjs'
	import bg_2 from '@/static/image/bg_2.png'
	
	export default {
		name: 'competition',
		provide() {
			return {
				callRefresh: this.refreshData,
			}
		},
		components: {
			SwiperListItem
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
		},
		computed: {
			...mapState({
				token: state => state.login.token,
				userInfo: state => state.login.userInfo
			}),
		},
		watch: {
			token() {
				this.isView = true
			},
			visible() {
				this.visible && this.initData()
			}
		},
		data() {
			return {
				bg_2,
				clickIndex: 0,
				tabList: [
					{
						name: '进行中',
						value: 1
					}, {
						name: '未开始',
						value: 2
					}, {
						name: '已关注',
						value: 3
					}
				],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				orderNumTotal: {},
				isAnimation: false,
				isRenew: false
			}
		},
		created() {
		},
		mounted() {
			this.initData()
		},
		methods: {
			initData() {
				if (this.token) this.isView = true
				// // 销毁
				// uni.$off("clickIndex")
				// // 监听
				// uni.$once('clickIndex', (index) => {
				// 	console.log('222222')
				// 	this.clickIndex = index
				// })
			},
			// 数据加载
			async loadData(params) {
				try {
					const {
						data: {
							list,
							total
						}
					} = await matchList({
						page: params.page,
						limit: params.limit,
						type: this.tabList[this.current].value
					})
					this.$refs.listItem[this.current].getData(list || [])
				} catch (e) {
					// TODO handle the exception
				}
			},
			// tabs通知swiper切换
			tabsChange(index, value) {
				console.log(index)
				this.current = index;
			},
			// swiper滑动中
			swiperTransition(e) {
				this.$refs.tabs.setDx(e.detail.dx);
			},
			// swiper滑动结束
			swiperAnimationfinish(e) {
				this.current = e.detail.current;
				this.$refs.tabs.unlockDx();
			},
			// 如果要通知当前展示的z-paging刷新，请调用此方法
			reloadCurrentList() {
				this.$refs.listItem[this.current].reload();
			},
			refreshData() {
				this.$refs.listItem[this.current].refresh()
			},
			handleRefresh() {
				this.isAnimation = false
				setTimeout(() => {
					this.isAnimation = true
					this.reloadCurrentList()
				}, 50)
			},
			goLogin() {
				uni.navigateTo({
					url: `/pages/login/login`
				})
			},
			async renew() {
				try {
					this.$showModal('是否向管理员申请续期?', () => {
						this.isRenew = true
					})
				} catch (e) {}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.zTabs {
		background: #F5F5F5 !important;
		border-radius: 30rpx 30rpx 0 0 !important;
	}
	.competition{
		height: calc(100vh - 237px);
	}
	.swiper {
		// height: calc(100% - 40px);
		height: 100%;
		background: $uni-common-bg-color;
		// padding: 0 15px 10px;
	}
	.refresh-btn {
		position: fixed;
		right: 50rpx;
		bottom: 20%;
		width: 98rpx;
		height: 98rpx;
		line-height: 98rpx;
		border-radius: 50%;
		background: url("https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/refresh.png") no-repeat;
		background-position: center;
		background-size: 100%;
		box-shadow: 0 12px 10px -10px rgba(0, 0, 0, .1);
	}
	.refresh-btn.active {
		animation: rotateAndRebound 1s ease-in-out;
	}
	@keyframes rotateAndRebound {
	  0% {
	    transform: rotate(0deg);
	  }
	  100% {
	    transform: rotate(1080deg);
	  }
	}
</style>